/***
 * 容器组件 驾驶舱布局框
 */
/* eslint-disable */
import React, { Component } from 'react';
import { Menu, Tooltip } from 'antd';
import { hashHistory } from 'dva/router';
import styles from './index.less';
import Animation from '../../../components/common/Animation';
import MyIcon from '../../common/MyIcon';
import Timer from './sub/Timer/index';
import Weather from './sub/Weather/index';
// import Util from "@Root/utils/Util";
const { SubMenu } = Menu;

class CockpitContainer extends Component {

  static defaultProps = {
    selected: '绍兴市',       // 市县下拉框选中项
    handleDropClick: null,   // 下拉框点击事件
  }

  componentDidMount() {
    this.setState({
      selected: this.props.selected,
    })
  }

  componentWillReceiveProps(nProps) {
    this.setState({
      selected: nProps.selected,
    })
  }

  state = {
    dropList: ["绍兴市", "越城区", "柯桥区", "新昌县", "上虞区", "诸暨市", "嵊州市"],
    isShowDropList: false,
    selected: '',
    isShowDropMenuList: false,
    dropMenuList: [
      { name: '建设成效', path: '/cockpitMain' },
      { name: '指标分析', path: '/indicator' },
      { name: '过程监管', path: '/cockpit/ProcessSupervision' },
      { name: '考核评价', path: '/cockpit/Evaluation' },
      { name: '企业信用', path: '/credit' },
      { name: '无废细胞', path: '/cockpit/NoWasteCell' },
      { name: '后台管理', path: '/publicSentiment' },
    ],
    selectedMenu: '',
  }

  handleDropClick = (name, index) => {
    const { handleDropClick } = this.props;
    this.setState({ selected: name })
    handleDropClick && handleDropClick(name, index);
  }

  getDropList = () => {
    if (!this.state.isShowDropList) return

    return (
      <Animation className="zoomInDown">
        <ul className={styles["drop-list"]}>
          {
            this.state.dropList.map((m, i) => (
              <li
                key={i}
                onClick={() => this.handleDropClick(m, i)}
                style={{
                  color: m === this.state.selected ? '#00A8FF' : ''
                }}
              >
                {m}
                <div className={styles["line"]}></div>
              </li>
            ))
          }
        </ul>
      </Animation>
    )
  }

  toggleDropList = (field) => {
    this.setState({
      [field]: !this.state[field]
    })
  }

  getDropMenuList = () => {
    if (!this.state.isShowDropMenuList) return

    const handleDropMenuClick = (m, i) => {
      hashHistory.push({ pathname: m.path });
      this.setState({
        selectedMenu: m.name
      })
    }

    return (
      <Animation className="bounceInRight">
        <ul className={styles["drop-menu-list"]}>
          {
            this.state.dropMenuList.map((m, i) => (
              <li
                key={i}
                onClick={() => handleDropMenuClick(m, i)}
                style={{
                  color: m.name === this.state.selectedMenu ? '#00A8FF' : ''
                }}
              >
                {m.name}
                <div className={styles["line"]}></div>
              </li>
            ))
          }
        </ul>
      </Animation>
    )
  }

  render() {
    const { children, style, className, title } = this.props;
    const { selected } = this.state;

    return (
      <div className={`${className} ${styles["cockpit-container-wrapper"]}`} style={style}>
        <div className={styles["bg"]}>
          <span className={styles["title"]} onClick={() => this.toggleDropList("isShowDropList")}>{title || "绍兴市无废城市建设成效展示"}</span>
          <div className={styles["timer"]}><Timer /></div>
          {/* {
            Util.getUrlParam('main') == 'nav' ? <div className={styles["menu-enter"] + ' ' + styles['back']} onClick={() => history.back()}>返回</div> :
              <Tooltip title="进入系统">
                <div className={styles["menu-enter"]}>
                  <MyIcon
                    type="icon-menu-s"
                    onClick={() => this.toggleDropList("isShowDropMenuList")}
                  />
                </div>
              </Tooltip>
          } */}
          <div className={styles["weather"]}><Weather location={selected} /></div>
          {this.getDropList()}
          {this.getDropMenuList()}
        </div>
        {/* <div className={styles["left-round"]}></div>
        <div className={styles["right-round"]}></div> */}
        <div className={styles["container"]}>
          {children}
        </div>
      </div>
    )
  }
}

export default CockpitContainer;
